import { getArticleTags } from '@/services/creationCenter';
import { ArticleDetail, ArticleTag } from '@/services/creationCenter/typing';
import { convertTimeZone } from '@/utils/operateTime';
import { createFromIconfontCN } from '@ant-design/icons';
import { Flex, Tag, Tooltip, Typography } from 'antd';
import { useEffect, useState } from 'react';
import DisplayData from '../components/DisplayData';
import styles from './index.module.scss';

const { Title, Text, Paragraph } = Typography;
const IconFont = createFromIconfontCN({
  scriptUrl: '/src/assets/icon/iconfont.js',
});

const ArticleItem: React.FC<{ articleDetail: ArticleDetail }> = ({
  articleDetail,
}) => {
  const [expanded, setExpanded] = useState(false);
  const [tags, setTags] = useState<ArticleTag[]>([]);

  async function getTags(article_id: number) {
    const { data } = await getArticleTags(article_id);
    setTags(data.list);
  }

  useEffect(() => {
    // 获取文章标签
    getTags(articleDetail.article_id);
  }, [articleDetail.article_id]);

  return (
    <div className={styles.article}>
      <div className={styles.info}>
        <Flex align="center">
          <Title level={4}>{articleDetail.title}</Title>
          {!!articleDetail.top_up && (
            <IconFont
              type="blog-zhiding"
              className={styles.icon}
              style={{ fontSize: '25px' }}
            />
          )}
          {!!articleDetail.popular && (
            <IconFont type="blog-remen" className={styles.icon} />
          )}
          {!articleDetail.original && (
            <IconFont type="blog-gepingtailogo-01" className={styles.icon} />
          )}
        </Flex>
        <div className={styles.tags}>
          {tags.map((tag) => (
            <Tag color="magenta" key={tag.tag_id}>
              {tag.tag_name}
            </Tag>
          ))}
        </div>
        <Paragraph
          className={styles.paragraph}
          ellipsis={{
            rows: 3,
            expandable: 'collapsible',
            expanded,
            onExpand: (_, info) => setExpanded(info.expanded),
          }}
        >
          {articleDetail.synopsis}
        </Paragraph>
        <Flex justify="space-between" align="center">
          <div className={styles.left}>
            <span className={styles.avatar}></span>
            <Text style={{ marginRight: '10px' }}>
              {articleDetail.username}
            </Text>
            <Tooltip title="更新时间">
              <Text type="secondary">
                {convertTimeZone(articleDetail.update_time)}
              </Text>
            </Tooltip>
          </div>
          <div className={styles.right}>
            <DisplayData
              words_num={articleDetail.words_num}
              thumbs_up={articleDetail.thumbs_up}
              comment_num={articleDetail.comment_num}
              page_view={articleDetail.page_view}
            />
          </div>
        </Flex>
      </div>
      <Flex justify="center" align="center" className={styles.coverImg}>
        {articleDetail.cover_img_url ? (
          <img src={articleDetail.cover_img_url} alt="" />
        ) : (
          <div>暂无封面</div>
        )}
      </Flex>
    </div>
  );
};

export default ArticleItem;
